<template>
  <div>
    <el-header class="headerRow">
      <!-- logo -->
      <div class="logo">
        <img :class="color == 'dark' ? 'imgFilter' : ''" src="@/assets/element-plus-logo.svg" alt="" />
      </div>
      <div class="headerRight">
        <!-- 主题切换 -->
        <div class="interface-wp">
          <div class="theme-box">
            <el-switch v-model="isDarkTheme" @change="toggleTheme" style="
                --el-switch-on-color: #bfbfbf46;
                --el-switch-off-color: #dfdfdf;
              ">
              <template #active-action>
                <el-icon color="#000">
                  <Moon />
                </el-icon>
              </template>
              <template #inactive-action>
                <el-icon color="#409efc">
                  <Sunny />
                </el-icon>
              </template>
            </el-switch>
          </div>
        </div>
        <!-- 登录 -->
        <el-dropdown>
          <span class="el-dropdown-link">
            <img src="@/assets/vue.svg" alt="" />
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <!-- <el-dropdown-item>修改密码</el-dropdown-item> -->
              <!-- <el-dropdown-item>个人信息</el-dropdown-item> -->
              <el-dropdown-item @click="loginOut">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </el-header>
  </div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import { ElSwitch, ElMessageBox } from "element-plus";
import { useRouter } from "vue-router";
const router = useRouter();

// 获取本地存储的主题模式，默认为 'auto'
const localStore = ref(localStorage.getItem("themeMode") || "auto");
const color = ref();
// 根据localStore初始化isDarkTheme
const isDarkTheme = ref(localStore.value === "dark");

const toggleTheme = (value) => {
  const newTheme = value ? "dark" : "light";
  color.value = newTheme;
  if (localStore.value === newTheme) return;

  localStore.value = newTheme;
  localStorage.setItem("themeMode", newTheme);
  // 更新isDarkTheme
  isDarkTheme.value = value;

  let transition = document.startViewTransition(() => {
    document.documentElement.classList.remove("light", "dark");
    document.documentElement.classList.add(newTheme);
  });

  transition.ready.then(() => {
    // 获取开关元素的位置信息
    const el = document.querySelector(".el-switch");
    const rect = el.getBoundingClientRect();
    const x = rect.left + rect.width / 2;
    const y = rect.top + rect.height / 2;

    // 获取画圆的半径
    const radius = Math.sqrt(
      Math.max(x, window.innerWidth - x) ** 2 +
      Math.max(y, window.innerHeight - y) ** 2
    ); // 勾股定理

    document.documentElement.animate(
      {
        clipPath: [
          `circle(0 at ${x}px ${y}px)`,
          `circle(${radius}px at ${x}px ${y}px)`,
        ],
      },
      {
        duration: 500,
        pseudoElement: "::view-transition-new(root)",
      }
    );
  });
};

// 初始化主题
if (localStore.value === "light" || localStore.value === "dark") {
  document.documentElement.classList.remove("light", "dark");
  document.documentElement.classList.add(localStore.value);
}

const loginOut = async () => {
  await ElMessageBox.confirm("是否确认退出登录？", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  });
  router.replace("/login");
  localStorage.clear()
};
</script>

<style lang="less" scoped>
.headerRow {
  width: 100%;
  display: flex;
  align-items: center;
  position: relative;
  padding: 0;

  .logo {
    width: 200px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;

    img {
      width: 60%;
      cursor: pointer;
      transition: 0.5s;
    }

    .imgFilter {
      filter: drop-shadow(2px 2px 6px #409eff);
      transition: 0.5s;
    }
  }

  .headerRight {
    margin-left: auto;
    display: flex;
    align-items: center;
    padding: 0 50px;

    .interface-wp {
      margin-right: 30px;
    }

    .el-dropdown-link img {
      width: 40px;
      height: 40px;
      border-radius: 10px;
      cursor: pointer;
    }
  }
}

.headerRow::after {
  content: "";
  width: 100%;
  height: 1px;
  background: #bfbfbf46;
  position: absolute;
  bottom: 0%;
  left: 0%;
}

/* 去除下拉框黑线 */
:deep(.el-tooltip__trigger:focus-visible) {
  outline: unset;
}
</style>

<style>
:root {
  --theme-color: #000;
  --bg-color: #fff;
  background-color: var(--bg-color);
  color: var(--theme-color);
}

:root.dark {
  --bg-color: rgba(20, 20, 20);
  --theme-color: #fff;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
}
</style>
